<template>
  <div class="purchase">
    <div class="left">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>商品列表</div>
                <el-input  
                v-model="input" 
                style="width: 200px; height:100%"  
                size="mini" 
                clearable
                @clear="init"
                @input="init()"
                @keyup.enter.native="init()"
                placeholder="请输入商品名称">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
            <div style="height: 660px;">
                <div v-if="left.length == 0" style="height: 500px;width:100%;margin-top:-100px">
                        <Empty :is-search="false" />
                    </div>
                <div v-else class="products"  style="height: 660px;">
                    <div @click="clickMe(d)" v-for="d in data" :key="d.id" class="product">
                        <img :src="d.image" alt="" style="height: 100px;">
                        <div class="info">
                            {{ d.name }} <br>
                            剩余数量：{{ d.productNum }} <br>
                            价格： {{ d.price }}元
                        </div>
                    </div>
                </div>
            </div>

        </el-card>
    </div>

    <div class="right">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>购物车</div>
                <el-button style="float: right; padding: 3px 0" type="text" @click="clean()">清空</el-button>
            </div>
            <div  style="height: 600px;">
                <div  class="products" shadow="hover">
                    <div v-if="right.length == 0" style="height: 500px;width:100%;margin-top:-100px">
                        <Empty :is-search="false" />
                    </div>
                    <div v-else v-for="d in right" :key="d.id" class="product" style="height:178.1px">
                        <img :src="d.image" alt="" style="height: 100px;">
                        <div class="info">
                            {{ d.name }} <br>
                            价格： {{ d.amount }}元 <br>
                            数量：
                            <div class="button">
                                <el-button  size="mini" @click="sub(d)" class="button_inner">-</el-button>
                                <el-input class="input-width" v-model="d.number" @change="handleChange" label="描述文字" size="mini"/>
                                <el-button size="mini" @click="add(d)" class="button_inner">+</el-button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <el-divider style="margin:0px" ></el-divider>
            <div class="bottom">
                
                合计 {{ amount }} 元
                <el-button type="primary" style="margin-left: 15px;" @click="submit()">下单</el-button>
            </div>
        </el-card>
    </div>
  </div>
</template>

<script>
import {inventoryPage2} from '@/api/inventory'
import { submit } from '@/api/orderEmployee';
import {subShopping,ShoppingList,addProductToShopping,cleanShopping} from '@/api/storeShoppingCart'
import {format} from '@/utils/formValidate'
import Empty from '@/components/Empty/index.vue'
import {throttle} from '@/utils/common'
export default {
    components:{
        Empty
    },
    data() {
    return {
        data: [],
        left: [],
        right: [],
        input:'',
        amount:0,
        num:0,
        storeId:0
        
    };
    },
    created(){
        this.init()
    },
    methods: {
    init(){
        this.storeId = this.$store.state.user.userInfo.storeId == 0 ? '' : this.$store.state.user.userInfo.storeId
        inventoryPage2('',1,999999,this.input,'','',this.storeId,1).then((res)=>{
            this.data = res.data.records
            
            this.left = JSON.parse(JSON.stringify(this.data))
        })
        
        console.log(1)
        ShoppingList(this.storeId).then((res)=>{
            console.log(res.data)
            this.amount = 0
            this.right = res.data
            this.right.forEach(p=>{
                this.amount = this.amount + p.amount * p.number
            })
        })
        console.log(2)
    },
    clickMe(value){
        console.log(value)
        addProductToShopping(value).then((res)=>{
            this.init()
        }).catch((err)=>{
            this.$message.error(err)
        })

        // this.right.push(value)
    },
    clean(){
        this.$confirm('是否清空购物车？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            cleanShopping(this.storeId).then((res)=>{
                this.$message({
                type: 'success',
                message: '清空成功!'
            });
            this.init()
            }).catch((err)=>{
                this.$message({
                    type: 'info',
                    message: err
                });      
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });

    },
    handleChange(value) {
        console.log(value);
      },
    add(value){
        console.log(value)
        addProductToShopping(value).then((res)=>{
            console.log(res)
            this.init()
        }).catch((err)=>{
            this.$message.error(err)
        })
    },
    sub(value){
        console.log(value)
        subShopping(value).then((res)=>{
            console.log(res)
            this.init()
        }).catch((err)=>{
            this.$message.error(err)
        })
    },
    submit(){
        console.log(this.right)

        if(this.right.length == 0){
            this.$message.error("请添加商品")
            return
        }

        const time = format(new Date())
        this.$prompt('若有备注，请输入备注', '备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
            let order = {
            amount: this.amount,
            isVip: 0,
            number: "",
            ordertime: time,
            remark: value,
            status: 5,
            storeId: this.storeId
        }
        submit(order).then((res)=>{
            console.log(res)
            this.init()
        }).catch((err)=>{
            this.$message.error(err)
            return 
        })
          this.$message({
            type: 'success',
            message: '下单成功，共消费' + this.amount + '元'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消下单'
          });       
        });


    }
    }
};
</script>

<style scoped>
  .products {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    width: 103%;
    flex-wrap: wrap ;
    height: 600px;
    align-items: flex-start;
    align-content: flex-start;  

    overflow-y: scroll; 
  }

  /* 滚动条宽度 */
div::-webkit-scrollbar {
  width: 6px;
}

 /* 滚动条样式 */
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
/* 滚动条滑块 */
div::-webkit-scrollbar-thumb {
  background: #40a0ff49;
  border-radius: 10px;
}
/* 滚动条样式 */
div::-webkit-scrollbar-thumb:hover {
  background: #40a0ff;
}


  .box-card {
    width: 610px;
    height: 750px;
    line-height: 20px;

  }
  
  .purchase{
    display: flex;
    justify-content:space-around;
  }
  .clearfix{
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    height: 22px;
  }

  .info{
    font-size: 12px;
    line-height: 15px;
    color: gray;

    text-align: center;
    
}

.product{
    height: 155px;
    width: 105px;
    /* border: solid; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 5px;
    border-radius: 5px;
}

.bottom{
    height: 100px;
    margin-top: 10px;

}

.el-divider--horizontal {
    margin: 0px;
}

.button{
    width: 100%;
    display: flex;
}

.input-width{
    width: 50%;
}

.button_inner{
    width: 5px;
    height: 100%;
}

.product:hover{
    /* box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1) */
    box-shadow: 0 2px 4px rgba(64, 158, 255, .12), 0 0 6px rgba(64, 158, 255, .04);
    transform: translate(1px,1px) scale(1.05);
}
</style>